﻿(function(window){
	var offset = 174,
		duration = 20,
		numb = 3,
		i = 0,
		effect = 'easeOutExpo';
	
	var slide = function(container, thumbnail){
		this.ctner = container;
		this.thbil = thumbnail;
		this.next = 0;
		this.init().move();
	};
	
	slide.prototype = {
		init: function(){
			this.ctner.style.position = 'absolute';
			
			var _this = this;
			for(;i<numb;i++){
				this.thbil[i]['markId'] = i;
				
				addEvent(this.thbil[i],'mouseover',function(){
					/*
					_this.clearHandler(_this);
					if((_this.next == 0 ? numb-1 : _this.next-1) == this.markId){
						_this.next--; //to keep 'next value' consistent. After 'mouseout' 'next++'.
						return;
					}else{
						_this.next - 1 < 0 ?
							_this.thbil[numb-1].className = '' :
							_this.thbil[_this.next - 1].className = '';
					}
					_this.next = this.markId; //The current element is the next element
					_this.anim();
					*/
					// console.log('mouseover test in ie6');
				});
				
				addEvent(_this.thbil[i],'mouseout',function(){
					// _this.move();
				});
			}
			
			var test = document.getElementById('testIndex');
			addEvent(test,'mouseover',function(){
				console.log('mouseover test in ie6');
			});
			addEvent(test,'mouseout',function(){
				console.log('mouseout test in ie6');
			});
			return this;
		},
		
		move: function(){
			if(this.next++ >= numb-1) this.next = 0;
			
			var _this = this;
			this.pageHandle = 
				window.setTimeout(function(){
					_this.step();
				}, 3*1000);
		},
		
		step: function(){
			this.anim();
			this.move();
		},
		
		anim: function(){
			//The effect of display
			if(this.next == 0){
				this.effect(this.ctner.style, 
					-(numb-1)*offset, 
					(numb-1)*offset);
					
				this.thbil[numb-1].className = '';
				this.thbil[0].className = 'current';
			}else{
				this.effect(this.ctner.style, 
					(0 - (this.next-1) * offset), 
					-offset);
					
				this.thbil[this.next-1].className = '';
				this.thbil[this.next].className = 'current';
			}
		},
		
		effect: function(property, begin, change){
			var 
				timer = 0, 
				_this = this,
				effectFun = this.easing[effect] || this.easing.swing;
			
			if(this.animateHandler){
				window.clearTimeout(this.animateHandler);
				this.animateHandler = null;
			}
			
			this.animateHandler = 
				window.setInterval(function(){
					if(timer++ >= duration){
						property.top = begin + change + 'px';
						window.clearInterval(_this.animateHandler);
						_this.animateHandler = null;
					}else{
						property.top = effectFun(timer, begin, change, duration) + 'px';
					}
				}, 12);
		},
		
		clearHandler: function(_this){
			if(_this.pageHandle){
				window.clearTimeout(_this.pageHandle);
				_this.pageHandle = null;
			}
			if(_this.animateHandler){
				window.clearTimeout(_this.animateHandler);
				_this.animateHandler = null;
			}
			
		},
		
		easing: {
			swing : function(t, b, c, d){
				return ((-Math.cos(t / d * Math.PI) / 2) + 0.5) * c + b;
			},
			easeOutExpo: function(t, b, c, d){
				return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
			}
		}
	};
	
	var sloo = function(ol,liset){
		return new slide(ol,liset);
	};
	
	window.sloo = sloo;
})(window);